<template>
  <div class="main">
    <div class="home-wrapper">
      <div class="first-words" ref="tabe" :style="stySty">页面数据加载成功</div>
      <scroller class="my-scroller" :on-refresh="refresh">
        <div class="scroll-wrapper">
          <!-- banner轮播 -->
          <div class="swiper-container" id="bannerSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide banner-swiper" v-for="(i, index) in bannerList" :key="index">
                <img class="absss" @click="goBannerDetail(i)" :src="i.image" />
              </div>
              <span v-if="bannerList.length === 0" class="seatImg" />
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <!-- 导航栏 -->
          <div class="nav-box flex-h">
            <span class="nav_list" v-for="i of navList" :key="i.id" @click="goService(i)">
              <img :src="i.iconUrl" alt />
              <b>{{ i.name }}</b>
            </span>
          </div>
          <div class="nav-box flex-h" v-if="navList.length === 0">
            <span class="nav_list" v-for="index of 12" :key="index">
              <img style="background: #f2f2f2;" src alt />
            </span>
          </div>
          <!-- goLive方法跳转每周直播列表页 -->
          <div class="subtitle flex-h" @click="goLive">
            <span class="flex1">每周直播</span>
            <i class="imgIcon"></i>
          </div>
          <div class="liveBox">
            <img class="liveImg" @click="goWebsite" src="https://static.shengxue985.com/sxzx_wechat/images/high-school-live.png" alt="" />
            <!-- <span>招生宣传老师线上公益培训</span> -->
          </div>
          <!-- 资讯列表 -->
          <div class="subtitle flex-h">
            <span class="flex1">升学资讯</span>
            <div @click="gotoInfoClassify" class="flex1" style="text-align: right;">
              <i class="imgIcon"></i>
            </div>
          </div>
          <div>
            <info-list :newsData="newsDataList" v-on:listenToNews="showTids"></info-list>
          </div>
          <div class="subtitle flex-h">
            <span class="flex1">高校招生</span>
            <div class="flex1" style="text-align: right;"></div>
          </div>
          <college-enrollment @getToIndex="getIndex" @openVip="showBuyVipModle = true" :infoList="infoList" :liveList="liveList" :advisoriesList="advisoriesList" :topicList="topicList" :imgTextTopic="imgTextTopic" :videoTopic="videoTopic"></college-enrollment>
        </div>
      </scroller>
    </div>
    <supplementInfo ref="editInfo" :showArea="showArea" @closed="showArea = 'down'" @completes="completeInfo"></supplementInfo>
    <comfirBox :showComfirm="showConfirm" confirBtnTxt="去填写" @onCancel="showConfirm = false" @onConfirm="confirm">
      <div class="confirm">
        <img src="~@/static/images/tubiao_shouquanguanli_active.png" alt />
        <h2>请完善您的个人资料</h2>
        <span>该功能需要您补充完整的个人资料</span>
        <span>请您补充资料后再次进入。</span>
      </div>
    </comfirBox>
    <BuyVip :xBuy="showBuyVipModle" :serverName="serverName" @handleCloseBuyDialog="showBuyVipModle = false"></BuyVip>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper/dist/js/swiper.js'
import { getUserInfoById, getBatchCommodityType, indexShow } from '~/api/identity'
import { getInfos, getProvinces, getLives, getAdvisories, getTopics } from '~/api/school'
import ls from 'store2'
import comfirBox from '~/components/comfirBox'
import supplementInfo from './login/components/supplementInfo'
import BuyVip from '~/components/BuyVip'
import collegeEnrollment from '~/components/collegeEnrollment'
import infoList from '~/components/infoList'
import config from '../package.json'
export default {
  components: {
    supplementInfo,
    comfirBox,
    BuyVip,
    collegeEnrollment,
    infoList,
  },
  created() {},
  data() {
    return {
      videoTopic: [],
      imgTextTopic: [],
      liveList: [],
      topicList: [],
      advisoriesList: [],
      infoList: [],
      tabIndex: 1,
      stySty: '',
      isVipStr: '',
      hasRight: false,
      showBuyVipModle: false,
      showConfirm: false,
      clickFlag: false,
      showArea: '',
      newsDataList: [],
      bannerList: [],
      marqueeList: [],
      commodityList: [1, 2],
      currentPage: 1,
      defaultProvince: '',
      listData: [1],
      navList: [],
      serverName: '',
      isLoadAll: false,
    }
  },
  created() {
    this.getArea()
  },
  mounted: function() {
    this.$visit('Home')
    if (ls.get('userType') * 1 > 2) {
      let keysPath = {
        category: 'home',
        paths: process.env.mallurl + '?from=wechat',
      }
      sessionStorage.setItem('goesRouter', JSON.stringify(keysPath))
      ls.remove('tokensyxk')
      this.commonJs.gopush('../login/msgLogin')
    }
    this.$getVip()
    if (sessionStorage.getItem('homePagesList')) {
      this.isLoadAll = true
      let objData = JSON.parse(sessionStorage.getItem('homePagesList'))
      this.navList = objData.navList
      this.bannerList = objData.bannerList
      this.commodityList = objData.commodityList
      this.newsDataList = objData.newsDataList
      this.marqueeList = objData.marqueeList
      this.lableList = objData.lableList
      this.infoList = objData.infoList
      this.advisoriesList = objData.advisoriesList
      this.liveList = objData.liveList
      this.topicList = objData.topicList
      this.videoTopic = objData.videoTopic
      this.imgTextTopic = objData.imgTextTopic
      this.tabIndex = objData.tabIndex
      this.$nextTick(function() {
        this.bannerSwip()
        this.specialSwip()
      })
    } else {
      this.indexShow()
    }
    this.getResult()
  },
  beforeRouteLeave(to, from, next) {
    let obj = {
      navList: this.navList,
      bannerList: this.bannerList,
      commodityList: this.commodityList,
      newsDataList: this.newsDataList,
      marqueeList: this.marqueeList,
      lableList: this.lableList,
      infoList: this.infoList,
      advisoriesList: this.advisoriesList,
      liveList: this.liveList,
      topicList: this.topicList,
      videoTopic: this.videoTopic,
      imgTextTopic: this.imgTextTopic,
      tabIndex: this.tabIndex,
    }
    if (ls.get('tokensyxk')) {
      sessionStorage.setItem('homePagesList', JSON.stringify(obj))
    }

    next()
  },
  methods: {
    goLive() {
      this.$router.push({ path: '../recruitStudents/lives' + '?provincesId=' + sessionStorage.getItem('provincesId') + '&type=week' })
    },
    getIndex(i) {
      this.tabIndex = i
    },
    goInfo(item) {
      this.commonJs.gopush('../info/infoDetail', item.id)
    },
    goMore(uri) {
      this.$router.push({ path: uri + '?provincesId=' + sessionStorage.getItem('provincesId') })
    },
    async getResult() {
      let provincesList = await this.getProvinces()
      if (ls.get('userArea')) {
        provincesList.forEach((item) => {
          if (item.label === ls.get('userArea')) {
            this.provincesId = item.id
          }
        })
      } else {
        this.provincesId = 0
      }
      sessionStorage.setItem('provincesId', this.provincesId)
      let infos = await this.getInfos(1, 5, this.provincesId)
      this.infoList = infos.data
      let lives = await this.getLives(2, 1, 5)
      this.liveList = lives.data
      let advisories = await this.getAdvisories(1, 5, this.provincesId, '')
      this.advisoriesList = advisories.data
      let topics = await this.getTopics()
      this.topicList = topics.recommends.map((item) => {
        return {
          isTopic: true,
          commodityType: 3,
          commodityName: item.topic_name,
          pics: [item.cover],
          id: item.id,
        }
      })
      this.videoTopic = topics.videos.map((item) => {
        return {
          isTopic: true,
          commodityType: 1,
          commodityName: item.topic_name,
          pics: [item.cover],
          id: item.id,
        }
      })
      this.imgTextTopic = topics.graphs.map((item) => {
        return {
          isTopic: true,
          commodityType: 2,
          commodityName: item.topic_name,
          pics: [item.cover],
          id: item.id,
        }
      })
      this.isLoadAll = true
    },
    getTopics() {
      return getTopics()
    },
    getAdvisories(page, limit, povId, search) {
      return getAdvisories(page, limit, povId, search)
    },
    getLives(type, page, limit) {
      return getLives(type, page, limit)
    },
    getProvinces() {
      return getProvinces()
    },
    getInfos(a, b, c) {
      return getInfos(a, b, c)
    },
    goWebsite() {
      window.location.href = 'https://ke.qq.com/webcourse/index.html?cid=1561584&term_id=101659915&lite=1&from=800021724'
    },
    refresh(done) {
      setTimeout(() => {
        this.onFetching = false
        this.stySty = 'z-index:10000;opacity: 1;'
        let _this = this
        this.indexShow()
        this.getResult()
        setTimeout(() => {
          _this.stySty = 'z-index:-1;opacity: 0;'
        }, 2000)
        done()
      }, 1500)
    },
    indexShow() {
      this.defaultProvince = ls.get('userArea')
      this.defaultProvince ? (this.defaultProvince = this.defaultProvince) : (this.defaultProvince = '全国')
      let obj = {
        application: 'wechat',
        areaName: {
          areaName: this.defaultProvince,
        },
        modulePage: 'index',
        version: config.version,
      }
      indexShow(obj)
        .then((res) => {
          if (res.code == '0') {
            this.navList = res.data.appIndexMenuList.appIndexMenu
            this.bannerList = res.data.banners
            this.commodityList = res.data.recommendCommoditiesList.recommendCommodities
            this.newsDataList = res.data.topTopics
            this.newsDataList = this.newsDataList.slice(0, 3)
            this.marqueeList = res.data.recommendTopicList.recommendTopic
            this.lableList = res.data.specialTopics.specialList
            this.$nextTick(function() {
              this.hasRight = true
              this.bannerSwip()
              this.specialSwip()
            })
          }
        })
        .catch((err) => {})
    },
    gotoInfoClassify() {
      sessionStorage.setItem('lableList', JSON.stringify(this.lableList))
      this.commonJs.gopush('info/infoClassify')
    },
    goBannerDetail(item) {
      if (!ls.get('tokensyxk') || !ls.get('userVoId')) {
        //没有登陆信息或者没有uservoid 或者usertype
        let keysPath = {
          category: 'home',
          paths: process.env.mallurl + '?from=wechat',
        }
        sessionStorage.setItem('goesRouter', JSON.stringify(keysPath))
        this.commonJs.gopush('../login/msgLogin')
        return false
      }
      let str = item.link
      if (str.indexOf('shengxue://') > -1) {
        let ids = []
        str = str.split('?id=')
        ids.push(item.id)
        getBatchCommodityType(ids)
          .then((res) => {
            if (res.code == '0') {
              if (res.data[0].commodityType === 2) {
                this.commonJs.gopush('../curriculum/videoPlay?id=' + str[1] + '&order=0')
              } else {
                this.commonJs.gopush('../curriculum/graphicCourse', str[1])
              }
            }
          })
          .catch((err) => {})
      } else if (str.indexOf('getCard') > -1) {
        this.commonJs.gopush('getCard')
      } else {
        window.location.href = str
      }
    },
    confirm() {
      this.showConfirm = false
      this.$refs.editInfo.getCascadeArea()
      setTimeout(() => {
        this.showArea = 'up'
      }, 50)
    },
    getArea() {
      let isLogin = ls.get('tokensyxk')
      if (!isLogin) {
        return false
      }
      getUserInfoById({
        uid: ls.get('yxkData').userVoId,
      })
        .then((res) => {
          let areas = res.data.area
          this.userGrade = res.data.grade
          this.userClassName = res.data.className
          this.userSchool = res.data.school
          if (areas) {
            let areaArr = areas.split(',')
            this.userArea = areaArr[0]
            ls.set('userArea', this.userArea)
            this.defaultProvince = ls.get('userArea')
          } else {
            ls.set('userArea', null)
          }
        })
        .catch((err) => {})
        .finally(() => {
          this.$hideLoading()
        })
    },
    curriculumClick() {
      this.$vux.confirm.show({
        // 组件除show外的属性
        content: "<p style='text-align:center;'>该功能暂时仅限APP内使用，点击确定下载APP</p>",
        onCancel() {},
        onConfirm() {
          window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.sx985.am'
        },
      })
    },
    completeInfo() {
      this.showArea = 'down'
      this.defaultProvince = ls.get('userArea')
      this.getArea()
      this.indexShow()
      this.getResult()
      // this.getBannerList();
    },
    gotoPush(routerName) {
      console.log(routerName,'router');
      
      this.$router.push({ path: routerName })
    },
    goService(item) {
      let isVipstrs = sessionStorage.getItem('isVipStr')
      if (item.url === 'isNull') {
        // this.$vux.toast.text("暂未开放,敬请期待");
        this.curriculumClick()
        return false
      }
      if (!ls.get('tokensyxk') || !ls.get('userVoId')) {
        //没有登陆信息或者没有uservoid 或者usertype
        let keysPath = {
          category: 'home',
          paths: process.env.mallurl + '?from=wechat',
        }
        sessionStorage.setItem('goesRouter', JSON.stringify(keysPath))
        this.commonJs.gopush('../login/msgLogin')
        return false
      }
      this.defaultProvince = ls.get('userArea')
      this.defaultProvince ? (this.defaultProvince = this.defaultProvince) : (this.defaultProvince = '全国')
      let goRouterName = item.url
      if (item.moduleType === 'route') {
        //第一步先判断有无信息(省份,学校,班级,年纪) 第二步有无vip

        if (item.isInfo) {
          if (!this.defaultProvince || this.defaultProvince === '全国' || !this.userGrade || !this.userClassName || !this.userSchool) {
            this.showConfirm = true
            return false
          }
        }
        if (item.isVip) {
          //需要vip
          if (isVipstrs.indexOf(item.name) > -1 || item.name === '院校库') {
            //买了vip 直接跳转
            this.gotoPush(goRouterName)
          } else {
            //没买vip 需要去买vip
            this.serverName = item.name
            this.showBuyVipModle = true
          }
        } else {
          this.gotoPush(goRouterName)
        }
      } else {
        if (item.isInfo) {
          if (!this.defaultProvince || this.defaultProvince === '全国' || !this.userGrade || !this.userClassName || !this.userSchool) {
            this.showConfirm = true
            return false
          }
        }
        if (item.isVip) {
          //需要vip
          if (isVipstrs.indexOf(item.name) > -1) {
            //买了vip 直接跳转
            let ure = window.location.href
            let urls = encodeURIComponent(ure)
            let goweburl
            if (/\?/.test(goRouterName)) {
              goweburl = goRouterName + '&'
            } else {
              goweburl = goRouterName + '?'
            }
            window.location.href = goweburl + 'tea_return_url=' + urls + '&tea_userData=' + encodeURIComponent(JSON.stringify(ls.get('yxkData')))
          } else {
            //没买vip 需要去买vip
            this.serverName = item.name
            this.showBuyVipModle = true
          }
        } else {
          let ure = window.location.href
          let urls = encodeURIComponent(ure)
          let gonovipweburl
          if (/\?/.test(goRouterName)) {
            gonovipweburl = goRouterName + '&'
          } else {
            gonovipweburl = goRouterName + '?'
          }
          if (item.name === '升学服务') {
            window.location.href = gonovipweburl + 'sx_uid=' + ls.get('userVoId') + '&sx_token=' + ls.get('tokensyxk') + '&open_id=' + ls.get('wxopen_id')
          } else {
            window.location.href = gonovipweburl + 'tea_return_url=' + urls + '&tea_userData=' + encodeURIComponent(JSON.stringify(ls.get('yxkData')))
          }
        }
      }
      // }
    },

    specialSwip() {
      var mySwiper = new Swiper('#specialSwiper', {
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
      })
    },
    clickHot(tids) {
      this.commonJs.gopush('../info/infoDetail', tids)
    },
    bannerSwip() {
      if (this.bannerList.length > 1) {
        var mySwiper = new Swiper('#bannerSwiper', {
          // direction: 'vertical',
          loop: true,
          autoplay: true,
          autoplay: {
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            bulletElement: 'li',
          },
        })
      } else {
        var mySwiper = new Swiper('#bannerSwiper', {
          autoplay: false,
          autoplay: {
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            bulletElement: 'li',
          },
        })
      }
    },
    showTids(tids) {
      this.commonJs.gopush('../info/infoDetail', tids)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang="less">
.vux-divider {
  color: #c7c7c7 !important;
}
</style>

<style scoped lang="less">
.first-words {
  width: 100%;
  height: 0.8rem;
  background: #ffad0d;
  position: absolute;
  z-index: -1;
  opacity: 0;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.3rem;
  color: #fff;
  left: 0;
  top: 0rem;
}
.home-wrapper {
  width: 100%;
  height: 100vh;
  background: white;
  h1 {
    background: #fff;
    z-index: 10;
    position: relative;
    font-size: 0.5rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 1.2rem;
    display: block;
    height: 1.2rem;
    padding-left: 0.35rem;
    box-sizing: border-box;
  }
  .scroll-wrapper {
    .banner-swiper {
      img {
        display: block;
        width: 6.9rem;
        height: 3.2rem;
        border-radius: 0.2rem;
        margin: 0.2rem auto 0;
      }
    }
    /deep/.swiper-pagination-bullet {
      width: 0.16rem;
      height: 0.04rem;
      background: rgba(255, 255, 255, 1);
      display: inline-block;
      border-radius: 2px;
    }
    .seatImg {
      display: block;
      width: 6.9rem;
      height: 3.2rem;
      margin: 0.2rem auto 0;
      background: url('~@/static/header.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 0.2rem;
    }
    .nav-box {
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 6.8rem;
      margin: 0.2rem auto;
      .nav_list {
        width: 1.7rem;
        height: 1.44rem;
        img,
        b {
          display: block;
        }
        img {
          width: 0.72rem;
          height: 0.72rem;
          margin: 0.16rem auto 0;
        }
        b {
          font-size: 0.24rem;
          font-family: PingFangSC;
          font-weight: 400;
          color: rgba(34, 34, 34, 1);
          line-height: 0.4rem;
          text-align: center;
        }
      }
    }
    .subtitle {
      padding: 0 0.3rem;
      box-sizing: border-box;
      height: 0.8rem;
      margin: 0.2rem auto;
      span {
        font-size: 0.4rem;
        font-family: PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.8rem;
      }
      .imgIcon {
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;
        background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
        background-size: 4.5rem 3.6rem;
      }
    }
  }
}
.confirm {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
  border-radius: 0.2rem;
  img,
  h2,
  span,
  b {
    display: block;
  }

  img {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.2rem auto 0;
  }

  h2 {
    font-size: 0.4rem;
    font-family: PingFangSC-Semibold, PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    margin: 0.1rem auto 0.2rem;
    text-align: center;
  }

  span {
    font-size: 0.3rem;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    line-height: 0.5rem;
    text-align: center;
  }

  .botter-btn {
    margin-top: 0.5rem;
    border-top: 0.01rem solid rgba(229, 232, 237, 1);
  }

  b {
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    font-size: 0.3rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
  }

  b:nth-of-type(2) {
    color: @assistColor;
    border-left: 0.01rem solid rgba(229, 232, 237, 1);
  }
}
.liveBox {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
  img {
    display: block;
    width: 100%;
    height: 3.3rem;
    border-radius: 0.16rem;
  }
  span {
    display: block;
    width: 100%;
    height: 0.9rem;
    line-height: 0.9rem;
    border-radius: 0px 0px 0.16rem 0.16rem;
    border: 1px solid rgba(229, 232, 237, 1);
    font-size: 0.3rem;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    padding-left: 0.3rem;
    box-sizing: border-box;
  }
}
</style>
